其他
【每日一练】42—垂直轮播图效果的实现
写在前面
轮播图的案例,我们在前面的练习中也分享过,但是这种垂直的轮播动画,之前我们看的很多效果,基本都是横向居多,并且文字也是放在图片上面或者图片之下,总之,就是为了节省页面空间。
但是,我们今天这个样式,再节省页面空间上,可能会感觉不那么友好。
今天这个效果,也有它的优势,比方左边的纯色背景,会使文字易读,有了很多发挥空间。
好了,我们现在一起来看一下,今天的这个练习效果:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="https://cdn.staticfile.org/font-awesome/4.7.0/css/font-awesome.css" />
<title>【每日一练】42—垂直轮播图效果的实现</title>
</head>
<body>
<div class="slider-container">
<div class="left-slide">
<div style="background-color: #789d58">
<h1>走在校园走廊里的少女</h1>
<p>校园美女</p>
</div>
<div style="background-color: #9d2741">
<h1>校园小清新美女</h1>
<p>校园美女</p>
</div>
<div style="background-color: #252E33">
<h1>教室中看书调皮的美女</h1>
<p>校园美女</p>
</div>
<div style="background-color: #87994d">
<h1>校园中的可爱少女</h1>
<p>校园美女</p>
</div>
</div>
<div class="right-slide">
<div style="background-image: url('images/01.jpg')"></div>
<div style="background-image: url('images/02.jpg')"></div>
<div style="background-image: url('images/03.jpg')"></div>
<div style="background-image: url('images/04.jpg')"></div>
</div>
<div class="action-buttons">
<button class="down-button">
<i class="fa fa-arrow-down"></i>
</button>
<button class="up-button">
<i class="fa fa-arrow-up"></i>
</button>
</div>
</div>
</body>
</html>
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
font-family: 'Open Sans', sans-serif;
height: 100vh;
}
.slider-container {
position: relative;
overflow: hidden;
width: 100vw;
height: 100vh;
}
.left-slide {
height: 100%;
width: 35%;
position: absolute;
top: 0;
left: 0;
transition: transform 0.5s ease-in-out;
}
.left-slide > div {
height: 100%;
width: 100%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
color: #fff;
}
.left-slide h1 {
font-size: 40px;
margin-bottom: 10px;
margin-top: -30px;
}
.right-slide {
height: 100%;
position: absolute;
top: 0;
left: 35%;
width: 65%;
transition: transform 0.5s ease-in-out;
}
.right-slide > div {
background-repeat: no-repeat;
background-size: cover;
background-position: center center;
height: 100%;
width: 100%;
}
button {
background-color: #fff;
border: none;
color: #aaa;
cursor: pointer;
font-size: 16px;
padding: 15px;
}
button:hover {
color: #222;
}
button:focus {
outline: none;
}
.slider-container .action-buttons button {
position: absolute;
left: 35%;
top: 50%;
z-index: 100;
}
.slider-container .action-buttons .down-button {
transform: translateX(-100%);
border-top-left-radius: 5px;
border-bottom-left-radius: 5px;
}
.slider-container .action-buttons .up-button {
transform: translateY(-100%);
border-top-right-radius: 5px;
border-bottom-right-radius: 5px;
}
const sliderContainer = document.querySelector('.slider-container')
const slideRight = document.querySelector('.right-slide')
const slideLeft = document.querySelector('.left-slide')
const upButton = document.querySelector('.up-button')
const downButton = document.querySelector('.down-button')
const slidesLength = slideRight.querySelectorAll('div').length
let activeSlideIndex = 0
slideLeft.style.top = `-${(slidesLength - 1) * 100}vh`
upButton.addEventListener('click', () => changeSlide('up'))
downButton.addEventListener('click', () => changeSlide('down'))
const changeSlide = (direction) => {
const sliderHeight = sliderContainer.clientHeight
if(direction === 'up') {
activeSlideIndex++
if(activeSlideIndex > slidesLength - 1) {
activeSlideIndex = 0
}
} else if(direction === 'down') {
activeSlideIndex--
if(activeSlideIndex < 0) {
activeSlideIndex = slidesLength - 1
}
}
slideRight.style.transform = `translateY(-${activeSlideIndex * sliderHeight}px)`
slideLeft.style.transform = `translateY(${activeSlideIndex * sliderHeight}px)`
}
写在最后
以上就是我们今天的【每日一练】全部内容,希望今天的小练习对你有用,如果你觉得有帮助的话,请点赞我,关注我,并将它分享给你身边做开发的朋友,也许能够帮助到他。
我是杨小爱,我们明天见。
学习更多技能
请点击下方公众号